<template>
  <div id="themeIndex" v-loading="loading">
    <div class="header">
      <el-input v-model="sysArea" placeholder="请选择地区">
        <el-button slot="append" icon="el-icon-search"></el-button>
      </el-input>
      <el-input v-model="themeName" placeholder="请输入主题应用名称"></el-input>
      <el-input v-model="themeType" placeholder="请选择主题应用类型"></el-input>
      <el-input v-model="status" placeholder="请选择启用状态"></el-input>
      <el-button @click="pageChange(1)" type="primary" icon="el-icon-search">搜 索</el-button>
      <el-button @click="reset()">重 置</el-button>
      <el-button @click="themeAdd('add')" icon="el-icon-circle-plus-outline" type="warning">新增主题应用</el-button>
    </div>
    <div class="contentBox">
      <el-table
        :data="tableData"
        style="width:100%;"
        tooltip-effect="light"
        :show-overflow-tooltip="true"
      >
        <el-table-column prop="code" label="编码"></el-table-column>
        <el-table-column prop="sysName" label="主题应用名称"></el-table-column>
        <el-table-column prop="deployLevel" label="地区"></el-table-column>
        <el-table-column prop="sysFrame" label="主题应用类型"></el-table-column>
        <el-table-column prop="type" label="启用状态" width="200"></el-table-column>
        <el-table-column label="操作" width="240">
          <template slot-scope="scope">
            <el-button @click="businessAdd('edit',scope.row.id)" type="text" size="small">配置</el-button>
            <el-button @click="businessAdd('view',scope.row.id)" type="text" size="small">查看</el-button>
            <el-button @click="showDelDialog(scope.row.id)" type="text" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="paginationBox">
        <el-pagination
          background
          layout="total, prev, pager, next, sizes, jumper"
          @current-change="pageChange"
          :current-page="current"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="size"
          :total="total"
        ></el-pagination>
      </div>
    </div>
    <!-- 删除 -->
    <el-dialog
      class="deleteDialog"
      title="删除"
      :visible.sync="deleteDialog"
      width="30%"
      :before-close="handleClose"
    >
      <span>
        <i class="el-icon-warning"></i>此操作将永久删除，是否继续？
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="handleConfirm()">确 定</el-button>
        <el-button @click="deleteDialog = false">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name:'themeIndex',
  components:{ },
  data(){
    return{
      loading:false,
      current:1,
      size:10,
      total:'',
      areaId:'',
      themeName:'',
      themeType:'',
      status:'',
      tableData: []
    }
  },
  created(){
    this.initData()
  },
  methods:{
    initData(){
      let params = {
        areaId:'',
        themeName:this.themeName,
        current:this.current,
        size:this.size
      }
      this.loading = true
      this.$get(this.$Api.themeList, params)
        .then(res => {
          this.loading = false
          if(res.data.statusCode === 200){
            this.tableData = res.data.data.records
            this.current = res.data.data.current
            this.size = res.data.data.size
            this.total = res.data.data.total
          }
        })
        .catch(err => {
          this.loading = false
        });
    },
    themeAdd(type, id){
      this.$router.push({
          path:'/clopedia/themeDetail',
          query:{
            type:type,
            id:id
          }
        }
      )
    },
    showDelDialog(id){
      this.deleteDialog = true
      this.delID = id
    },
    handleClose(){
      this.deleteDialog = false
    },
    handleConfirm(){
      console.log(this.delID)
      this.deleteDialog = false
      this.$delete(this.$Api.delOperation,{
        params:{
          idList:this.delID
        }
      }).then(res => {
          if (res.data.statusCode == 200) {
              this.initData();
              this.$message({
                  type: "success",
                  message: "恭喜你，删除成功!"
              });
          } else {
              this.$message.error(res.data.msg);
          }
      })
    },
    pageChange(val){
      this.current = val
      this.initData()
    },
    reset(){
      this.areaId = ''
      this.orgDeptId = ''
      this.themeName = ''
      this.pageChange(1)
    }
  }
}
</script>

<style lang="scss">
#themeIndex {
  position: relative;
  .el-popover {
    background-color: #ccc;
    .popover-box {
      width: 76px;
      height: 84px;
      text-align: center !important;
    }
  }
  .button-box {
    position: absolute;
    top: -45px;
    right: 0;
    .el-button {
      height: 32px;
      padding: 6px 20px !important;
    }
  }
  .header {
    margin-bottom: 20px;
    .el-input {
      width: 200px;
      height: 36px;
    }
  }
  .contentBox {
    .el-table {
      height: 65vh !important;
      .el-button {
        padding: 0;
      }
    }
  }
}
.el-dropdown-link {
  color: #409eff;
  cursor: pointer;
  margin-left: 10px;
}
.el-dropdown-menu {
  padding: 5px 0;
  .el-dropdown-menu__item {
    line-height: 30px;
  }
}
.el-popper[x-placement^="bottom"] {
  margin: 3px;
}
</style>